  
  <!-- HTML版本声明，声明本html文件是HTML5 -->
  <!DOCTYPE html>


  <!-- html标签是本页面的标签 -->
    <html lang="en">

    <!-- head标签是页面头标签，用于设置页面的信息 -->
    <head>
        <!-- title标签，设置页面标题 -->
        <title>风车</title>
        
        <!-- style标签，用于编写页面的css -->
        <style>

            /* #b表示id选择器， #xxx  表示选择页面中id属性值为xxx的元素。 */
            #container{
                width: 1600px;
                height: 800px;
                /* background-color: #FF0000; */

                /*设置元素的边框 */
                border: solid 2px black;

                /*设置元素的背景图片 */
                background-image: url(caodi.png);
                /*设置背景图片的尺寸，100%表示图片的尺寸是元素尺寸的100% */
                background-size: 100% 100%;

                /* 将容器设置为相对定位，这样绝对定位的子元素就能相对自己进行定位 */
                position: relative;
            }

            /* .表示class选择器， .xxx 选择页面中class值包含xxx的元素。 */
            .pic{
                /* 将元素的定位方式改为 绝对定位，这样就可以用过坐标设置元素的位置 */
                position: absolute;

                /* 设置动画名字 */
                animation-name: spin;

                /* 设置动画时间 */
                animation-duration: 6000ms;

                /* 设置动画执行次数 */
                animation-iteration-count: infinite;

                /* 设置动画速率曲线 */
                animation-timing-function: linear;
           }

            #f1{
                width: 400px;
                height: 400px;
                left: 342px;
                top: 200px;
            }
            #f2{
                width: 200px;
                height: 200px;
                left: 720px;
                top: 475px;
            }
            #f3{
                width: 300px;
                height: 300px;
                left: 900px;
                top: 350px;
            }

            /* 创建关键帧动画 */
            @keyframes spin{
                0%{
                    transform: rotate(0);
                }
                100%{
                    transform: rotate(360deg);
                }
            }

            /* hover伪类，当鼠标指针悬停在元素上时触发 */
            #f1:hover{
                /* border: solid 1px black; */
                animation-duration: 1s;    
            }

            #f2:hover{
                /* 动画播放状态，默认值为running，设置为paused表示暂停 */
                animation-play-state: paused;
            }

            #f3:hover{
                /* 设置动画播放的方向 */
                animation-direction: reverse;
            }
        </style>

    </head>

    <!-- body页面主体标签，用于设置页面中的内容。 -->
    <body>
        
        
        <div id="container">

            <!-- img标签，用于显示一张图片，其中src属性表示图片的地址。-->
            <img id="f1" class="pic" src="fengche.png">
            <img id="f2" class="pic" src="fengche.png">
            <img id="f3" class="pic" src="fengche.png">


        </div>



    </body>
    </html>